<template>
	<view class="zone">
		<Header title="专属客服"></Header>
		<view class="main">

			<image class="header" src="http://image.qxgm.site/tdz/img/zskf/mg-02.png" mode="widthFix"></image>

			<view class="see" @click="chakan">
				查看联系方式
			</view>
			<image class="title" src="http://image.qxgm.site/tdz/img/zskf/t1.png" mode="widthFix"></image>

			<image class="info" src="http://image.qxgm.site/tdz/img/zskf/t2.png" mode="widthFix"></image>


		</view>



		<!-- 专属客服 -->
		<u-mask :show="explain">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>专属客服</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<view class="codeom">
								<image class="img" src="http://image.qxgm.site/tdz/img/invite/mhg-02.jpg" mode="widthFix"></image>
							</view>
							<view class="see2" @click="explain=false">
								确认
							</view>

						</view>
					</view>
				</view>
				<image class="m_close" @click="explain = false" src="http://image.qxgm.site/tdz/img/public/cha.png" mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				explain: false,
				money: '0'
			}
		},
		onShow() {

		},
		onLoad() {
			this.getinfo()
		},
		methods: {
			async getinfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.money = res.data.charge_money
				}
			},
			chakan() {
				if (this.money >= 1000) {
					this.explain = true
				} else {
					this.$u.toast('充值满1000即可解锁！')
				}
			}
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/zskf/bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.main {
		padding: 5vh 6px 0;
	}

	.header {
		display: block;
		margin: 0 auto;
		width: 126px;
	}

	.see {
		display: block;
		margin: 14px auto 0;
		width: 116px;
		height: 37px;
		text-align: center;
		line-height: 37px;
		font-size: 14px;
		font-weight: normal;
		color: #fdf0c4;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
		background-size: 100% 100%;
	}

	.see2 {
		display: block;
		margin: 14px auto 0;
		width: 116px;
		height: 37px;
		text-align: center;
		line-height: 37px;
		font-size: 16px;
		font-weight: normal;
		color: #fdf0c4;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
		background-size: 100% 100%;
	}

	.title {
		display: block;
		margin: 5px auto 0;
		width: 67%;
	}

	.info {
		width: 100%;
		margin-top: 20px;
	}

	.codeom {
		display: block;
		margin: 0 auto;
		width: 70%;
		padding: 8px;
		box-sizing: border-box;

		.img {
			width: 100%;
		}
	}
</style>